<template>
  <div class="footer">
<div class="serve_flow">
    <ul class="icon tt">
        <li v-for="(item,index) in dataarr" :key="index">
            <div class="modipag">
            </div>
            <div class="slide">
                <h3 class="tit">{{item.tit}}</h3>
                <p class="info">{{item.info}}</p>
            </div>
        </li>
    </ul>
</div>
<footer class="footer-section">
<div class="container">
    <div class="top">
    <ul class="outer">
        <li v-for="(item,index) in dataarr2" :key="index">
            <div>
                <p class="lable"> <i :class="item.icon"></i> {{item.lable}}</p>
            </div>
            <ul class="inner">
                <li v-for="(ite,ind) in item.subtitle" :key="ind">
                    <a href="javascript:;"> <i class="el-icon-service"></i> {{ite.title}}</a>
                </li>
            </ul>
        </li>
    </ul>
    <div class="chatcode">
        <h2>晨心家政</h2>
        <div class="code">
            <div class="p">
            <img src="../../static/qy.jpg" alt="">
            <p>客服服务微信</p>
            </div>
            <div class="p">
            <img src="../../static/qy2.jpg" alt="">
            <p>找工作微信</p>
            </div>
        </div>
    </div>
    </div>
    <span class="cc">✆热线电话：朵朵老师 13062621097 果果老师：13062621096     ✆投诉电话：18616066670    ☪公司地址：上海市松江区方泗路18号（掌安大厦）2号楼711室（9号线泗泾地铁站4号口 向东1公里）</span>
    <hr>
    <div class="bottom">
    <p>Copyright © 2018-2021. 上海晨心家政服务有限公司 www.chenxin99.com 江浙沪家政保姆网 月嫂育儿嫂公司 All rights reserved.</p>
     <div class="footer_link">
         <span v-for="(item,index) in dataarr3" :key="index" class="link">
             <i :class="item.icon"></i>
             <a href="javascript:;" class="linka">{{item.info}}</a>
         </span>
     </div>
     <p>保姆多少钱一个月 找保姆带小孩工资多少 上海好的保姆中介 找保姆工作 月嫂价格表 月嫂的工作范围和价格 找月嫂网 育儿嫂一天工作流程 上海育儿嫂哪里的好 照顾老人住家保姆</p>
     <p>上海高端家政公司排名 家政服务公司价目表 附近的家政公司电话 上海知名家政公司 小时工钟点工家政服务 家庭日常深度保洁 保洁价格表 半自理老人保姆价格</p>
     </div>
</div>
</footer>

  </div>
</template>

<script>
export default {
    data(){
    return{
        dataarr:[
            {
                tit:'试工再签约',
                info:'试用期3天，阿姨服务没有问题再签合同。',
            },
            {
                tit:'背景调查',
                info:'征信联网，100%确保阿姨无犯罪记录、无诚信问题',
            },
            {
                tit:'安心售后',
                info:'服务期内无条件、免费更换阿姨。',
            },
            {
                tit:'高额保险',
                info:'签约即免费赠送高额家政险，保障您的利益。',
            },
            ],
            dataarr2:[
                {
                    icon:'el-icon-s-grid',
                    lable:'关于晨心',
                    subtitle:[
                        {
                            icon:'',
                            title:'晨心简介'
                        },
                        {
                            icon:'',
                            title:'联系方式'
                        },
                        {
                            icon:'',
                            title:'全国加盟'
                        },
                        {
                            icon:'',
                            title:'加入晨心'
                        },
                        {
                            icon:'',
                            title:'服务保障'
                        },
                    ],
                },
                {
                    icon:'el-icon-loading',
                    lable:'晨心服务',
                    subtitle:[
                        {
                            icon:'',
                            title:'保姆最新招聘信息'
                        },
                        {
                            icon:'',
                            title:'服务预约'
                        },
                        {
                            icon:'',
                            title:'服务范围'
                        },
                        {
                            icon:'',
                            title:'在线商城'
                        },
                        {
                            icon:'',
                            title:'网站地图'
                        },
                    ],
                },
                {
                    icon:'el-icon-school',
                    lable:'帮助中心',
                    subtitle:[
                        {
                            icon:'',
                            title:'常见问题解答'
                        },
                        {
                            icon:'',
                            title:'价格表'
                        },
                        {
                            icon:'',
                            title:'客户须知'
                        },
                        {
                            icon:'',
                            title:'家政人员须知'
                        },
                        {
                            icon:'',
                            title:'知识产权维护'
                        },
                    ],
                },
            ],
            dataarr3:[
                {
                    icon:'el-icon-s-custom',
                    info:'上海市家庭服务业行业协会会员单位'
                },
                {
                    icon:'el-icon-s-data',
                    info:'上海市商务委备案企业'
                },
                {
                    icon:'el-icon-s-check',
                    info:'入驻商务部家政服务业信用信息平台'
                },
                {
                    icon:'el-icon-s-help',
                    info:'水滴信用认证的立信企业'
                },
                {
                    icon:'el-icon-video-camera-solid',
                    info:'沪公网备案 31011702005054号'
                },
                {
                    icon:'el-icon-message-solid',
                    info:'沪ICP备18018059号'
                },
            ]
    }
    },
    mounted(){
        console.log(this.dataarr);
    }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    color: #999;
}
.tit{
    color: #000;
}
.info{
    color: #888;
    font-size: 1rem;
}
.slide{
    display: grid;
    grid-gap: 5px;
}
.el-icon-service{
    color: red;
}
.lable,h2,i{
    color: #fff;
}

.lable{
    font-size: 1.2rem;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.icon{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    padding: 40px 100px 40px 0;
}
.icon li{
    display: grid;
    grid-template-columns:repeat(2,1fr);
    justify-items: flex-end;
    align-items: center;
    grid-gap: 15px;
}
.modipag{
    width: 100px;
    height: 100px;
    background: url(../../static/liuc.png);
    display: grid;
    justify-content: end;
}
li:nth-child(1)>div{
    background-position: 0 200px;
}
li:nth-child(2)>div{
    background-position: 0 100px;
}
li:nth-child(3)>div{
    background-position: 0 0;
}
li:nth-child(4)>div{
    background-position: 0 300px;
}
.container{
    display: grid;
    align-items: center;
    justify-content: center;
}
.top{
    display: grid;
    grid-template-columns: 60% 40%;
}
.outer{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: center;
    align-items: center;
    justify-items: center;
}
.outer>li{
    display: grid;
    grid-gap: 20px;
}
.inner{
    display: grid;
    grid-gap: 10px;
}
.chatcode{
    display: grid;
    justify-items: center;
    justify-content: center;
    align-items: center;
    grid-gap: 20px;
}
.chatcode .code{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2,1fr);
}
.chatcode .code img{
    object-fit: contain;
    width: 200px;
    height: 200px;
}
.p{
    display: grid;
    justify-content: center;
    align-items: center;
    justify-items: center;
}
.cc{
    display: inline-block;
    padding: 10px;
    /* position: relative; */
}
/* .cc::before{
    content: '';
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 40px;
} */
.link{
    display: inline-block;
    padding: 5px;
}
.link i,.linka{
    color: rgb(177, 173, 175); 
}
.bottom{
    padding-top: 10px;
    display: grid;
    justify-items: center;
    grid-gap: 5px;
}
.footer-section{
    border-top: 3px solid #f3212d;
    padding: 25px;
    background-color: #191919;
    background-image: url(http://res.chenxin99.com/images/footer/bg_bottom.png);
    background-size: cover;
}
</style>